<template>
    <div class="film-item">
        <div class="film-img"
            :style=" 'background-image: url('+ film.filmImg +')'">
        </div>
        <div class="film-title">{{film.filmName}}</div>
        <div class="film-source" v-if="film.source">
            <span class="star-img open" v-for=" n in Math.floor(film.source / 2) "></span>
            <span class="star-img close" v-for=" n in 5-Math.floor(film.source / 2) "></span>
            <span class="star-source">{{film.source}}</span>
        </div>
        <div class="film-source" v-if="!film.source">
            <span class="star-tip">暂无评分</span>
        </div>
    </div>
</template>
<script>
    Vue.component("FilmItem",{
        template:document.currentScript.ownerDocument.querySelector("template"),
        props:{
            film:{
                type:Object,
                required:true,
            }
        }
    })
</script>
